<template>
  <div style="height: 100%" ref="heroBarRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
} from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]);

type heroBarChartOption = echarts.ComposeOption<TooltipComponentOption | GridComponentOption | LegendComponentOption | BarSeriesOption>;

let heroBarChartInstance: any = null;
const dispose = [null, '', undefined];
const heroBarRef = ref<HTMLElement | null>(null);

const initHeroBar = () => {
  if (heroBarRef.value === null) return;
  if (!dispose.some((k: null | string | undefined) => k === heroBarChartInstance)) heroBarChartInstance.dispose();
  heroBarChartInstance = echarts.init(heroBarRef.value);

  const option: heroBarChartOption = {
    title: {
      text: '玩家喜爱度',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: { right: 0 },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: { formatter: `{value} '年'` },
        data: ['2019', '2020', '2021', '2022'],
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: { formatter: `{value} '万'}` },
      },
    ],
    series: [
      {
        name: '破败之王',
        type: 'bar',
        barWidth: 28,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84,255,159,0.5)' },
            { offset: 1, color: 'rgba(84,255,159,0.1)' },
          ]),
          //柱状图圆角
          borderRadius: [30, 30, 0, 0],
        },
        emphasis: {
          focus: 'series',
        },
        data: [120, 432, 301, 334],
      },
      {
        name: '法外狂徒',
        type: 'bar',
        barWidth: 28,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(245,108,108,0.5)' },
            { offset: 1, color: 'rgba(245,108,108,0.1)' },
          ]),
          //柱状图圆角
          borderRadius: [30, 30, 0, 0],
        },
        emphasis: {
          focus: 'series',
        },
        data: [400, 382, 521, 434],
      },
      {
        name: '圣枪游侠',
        type: 'bar',
        barWidth: 28,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(135,206,250,0.5)' },
            { offset: 1, color: 'rgba(135,206,250,0.1)' },
          ]),
          //柱状图圆角
          borderRadius: [30, 30, 0, 0],
        },
        emphasis: {
          focus: 'series',
        },
        data: [280, 312, 321, 234],
      },
      {
        name: '塞拉斯',
        type: 'bar',
        barWidth: 28,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(132,112,255,0.5)' },
            { offset: 1, color: 'rgba(132,112,255,0.1)' },
          ]),
          //柱状图圆角
          borderRadius: [30, 30, 0, 0],
        },
        emphasis: {
          focus: 'series',
        },
        data: [350, 232, 271, 324],
      },
    ],
  };
  option && heroBarChartInstance.setOption(option);
};

// echarts resize
const initEchartsResize = () => {
  nextTick(() => {
    heroBarChartInstance.resize();
  });
};

// 监听 echarts resize
const listenEchartsResize = () => {
  window.addEventListener('resize', initEchartsResize);
};

onMounted(() => {
  initHeroBar();
  listenEchartsResize();
});

onUnmounted(() => {
  window.removeEventListener('resize', initEchartsResize);
});
</script>

<style scoped lang="scss"></style>
